<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>title=={{title}}</h2>
        <my-head></my-head>
        <Demo></Demo>
        <my-foot></my-foot>
        <mydiv></mydiv>
        <my-nav></my-nav>
        <my-one></my-one>
        <my-data></my-data>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <Home></Home>
        <Hello></Hello>
        <div id="hello"></div>
    </div>

    <script>
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        Vue.component('my-foot', {
            template: '<h2>Foot - Foot - 底部</h2>'
        })
        Vue.component('my-div', {
            template: '<h2>Hello - WH2309</h2>'
        })
        Vue.component('myNav', {
            template: '<h2>Nav - Nav - 导航</h2>'
        })
        Vue.component('my-one', {
            template: '<div><h2>Hello - Hello - One </h2> <h2>Are you oK ?????  </h2> </div>'
        })
        Vue.component('my-data', {
            template: '<h2 @click="count++">Hello - Hello - Data - Data -- {{count}} </h2>',
            data() {    //  组件的data 是一个函数 必须有返回值 return  小型的闭包函数 保护内部数据不受外部的污染和修改
                return {
                    count: 2000
                }
            },
            methods: {},
            computed: {},
            watch: {},
            mounted() {
                console.log('data-data');
            },
            filters: {},
            components: {},
            directives: {},
        })
        Vue.component('my-btn', {
            template: "<button @click='countAdd'>{{count}}</button>",
            data() {
                return {
                    count: 1,
                }
            },
            methods: {
                countAdd() {
                    this.count++;
                }
            }
        })
        const Home = {
            template: "<h2>Home - hOme - home</h2>",
            data() {
                return {}
            },
            methods: {}
        }
        Vue.component('Home', Home)


        // Vue.extend  创建一个Vue的子类 (组件对象)
        const Hello = Vue.extend({
            template: "<h2>Hello Vue, Hello WH2309</h2>",
            methods: {},
            mounted() { },
            watch: {},
            components: {}
        })
        Vue.component('Hello', Hello)
        new Hello().$mount('#hello')
        const vm = new Vue({
            el: "#app",
            components: {
                Demo: {
                    template: '<h2>Demo - Demo - demo</h2>'
                }
            },
            data: {
                title: '组件基础'
            }
        })
    </script>
    <!-- 
        Vue 组件 
        Vue 组件  代码复用和抽象的主要形式是组件  封装代码   当做一个函数   

        组件当做小型的 单元实例对象  带有一个名称  (小巧 独立 可复用)


        必须包含 一段  HTML标签的 代码块 (css样式 javascript代码)

        显示页面
        展示数据
        修改数据 

        每一个组件当做小型的 vm 实例对象  (组件系统  vue 核心)
        
        Vue.component(name,options)  
        全局注册  name 组件名称  options 组件选项参数 

        局部注册 
        components 

        组件名规则  

        组件名  不能跟 html 标签一致
        mHead  遵循驼峰名 m-head  (HTML 遵循驼峰命名 )
        组件首字母 可以大写 (单文件组件 JS 文件 )
        组件的模板 只能包含一个 根元素 顶层标签   
        组件书写可以使用单标签  

        扩展
        $.extends     $  静态对象   静态对象扩展  $.get $.post  $.ajax  
        $.fn.extends  $.fn  =  $.prototype 原型对象 原型对象扩展  $("#id").show().hide() 

        class A extends B{}


        Vue.extend    使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项(el data computed methods mounted filters components directives )的对象

        extend   继承父类  

        class a extends Vue  ==> 创建子类 
        组件的选项参数  包含 之前你在实例写的任何属性 

        data 除外    在组件里面 data 属性必须是一个函数  必须有返回值  必须返回一个对象  
     -->
</body>

</html>